<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品交接单</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        .xia{
            margin-bottom: 0.8cm
        }
    </style>
</head>
<body>
<div id="app">
    <div class="xia"></div>
    <!--模糊查询-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
        <el-form-item label="交接单查询: ">
            <el-input v-model="formInline.id" placeholder="输入订单编号"></el-input>
        </el-form-item>
        <el-form-item label="入库时间: ">
            <el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="formInline.date" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="selectPageTPHC">查询</el-button>
        </el-form-item>
    </el-form>
    <div style="height: 10px;width: 100%;border: #8c939d"></div>
    <!--按钮组-->
    <el-row style="border-radius: 4px">
        <el-button type="warning" size="medium" icon="el-icon-plus" @click="dialogFormVisible = true">新增交接单</el-button>
        <el-button type="primary" size="medium" @click="PrintHandoverForm">打印交接单</el-button>
        <el-button type="danger" size="medium" icon="el-icon-delete" @click="deleteTProductHandover">批量删除</el-button>
        搜索:<el-input v-model="inp" @input="search" size="medium" style="width: 200px;"></el-input>
    </el-row>
    <el-divider></el-divider>
    <!--分页查询-->
    <div align="center" class="xia">
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="PageSize"
                layout="total, prev, pager, next,sizes, jumper"
                :total="totalCount"
        ></el-pagination>
    </div>
    <!--表格-->
    <template>
        <el-table
                ref="multipleTable"
                :data="iProductHandovers"
                border
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="交接单号"
                    :sort-by="['id', 'address']"
                    sortable
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="orderId"
                    :sort-by="['orderId', 'address']"
                    sortable
                    label="订单编号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="productName"
                    :sort-by="['productName', 'address']"
                    sortable
                    label="产品名称">
            </el-table-column>
            <el-table-column
                    prop="productionName"
                    :sort-by="['productionName', 'address']"
                    sortable
                    label="生产部门">
            </el-table-column>
            <el-table-column
                    prop="wareName"
                    :sort-by="['wareName', 'address']"
                    sortable
                    label="收货仓库">
            </el-table-column>
            <el-table-column
                    prop="num"
                    :sort-by="['num', 'address']"
                    sortable
                    label="入库数量">
            </el-table-column>
            <el-table-column
                    prop="handoverDate"
                    label="交接日期">
            </el-table-column>
            <el-table-column
                    prop="head"
                    label="交接人">
            </el-table-column>
            <el-table-column
                    prop="remake"
                    :sort-by="['remake', 'address']"
                    sortable
                    label="备注">
                <template slot-scope="scope">
                    <span v-if="scope.row.remake != null">{{ scope.row.remake }}</span>
                    <span v-else>无备注</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="state"
                    :sort-by="['state', 'address']"
                    sortable
                    label="状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.state == 0" style="color: red">未被查看</span>
                    <span v-else style="color: red">已被查看</span>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <div style="margin-top: 20px">
        <el-button @click="toggleSelection(iProductHandovers)">全选</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
    <!--对话框-->
    <el-dialog title="新增交接单" :visible.sync="dialogFormVisible" @close="aa">
        <el-form :model="iProductHandover">
            <el-form-item label="订单编号:" :label-width="formLabelWidth">
                <!--下拉菜单-->
                <el-select v-model="iProductHandover.orderId" placeholder="请选择订单编号" :label-width="formLabelWidth" @change="xuan">
                    <el-option v-for="tOrderC in tOrderCS" :label="tOrderC.orderId" :value="tOrderC.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="产品名称:" :label-width="formLabelWidth">
                <!--下拉菜单-->
                <el-input v-model="iProductHandover.productName" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="生产部门:" :label-width="formLabelWidth">
                <!--下拉菜单-->
                <el-input v-model="iProductHandover.productionName" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="收货仓库:" :label-width="formLabelWidth">
                <!--下拉菜单-->
                <el-select v-model="iProductHandover.wareName" placeholder="请选择收货仓库" :label-width="formLabelWidth">
                    <el-option v-for="tWare in tWares" :label="tWare.wareName" :value="tWare.wareName">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="入库数量:" :label-width="formLabelWidth">
                <el-input v-model="iProductHandover.num" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="交接日期:" :label-width="formLabelWidth">
                <el-date-picker type="datetime" v-model="iProductHandover.handoverDate" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="交接人:" :label-width="formLabelWidth">
                <el-input v-model="iProductHandover.head" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注:" :label-width="formLabelWidth">
                <el-input v-model="iProductHandover.remake" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addIProductHandover">确 定</el-button>
        </div>
    </el-dialog>
    <!--添加成功提示-->
    <el-dialog
            title="提示框"
            :visible.sync="dialogVisible"
            width="30%">
        <span icon="el-icon-success">添加成功!</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">确定</el-button>
        </span>
    </el-dialog>
    <!--打印提示框-->
    <el-dialog
            title="提示框"
            :visible.sync="dialogVisible2"
            width="30%">
        <span icon="el-icon-success">请选择需要打印的订单编号！</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible2 = false">确定</el-button>
        </span>
    </el-dialog>
    <!--删除提示框-->
    <el-dialog
            title="提示框"
            :visible.sync="dialogVisible3"
            width="30%">
        <span icon="el-icon-success">请选择需要删除的订单编号！</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible3 = false">确定</el-button>
        </span>
    </el-dialog>
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data(){
            return{
                totalCount: 10,  //默认数据总数
                dialogFormVisible: false,  //对话框
                dialogVisible: false,     //提示框
                dialogVisible2: false,     //提示框2
                dialogVisible3: false,     //提示框3
                currentPage: 1,  //当前页码
                start: 1,       //查询的页码
                pageSizes: [7,10,20,30],
                PageSize: 7, //默认每页数据量
                select: '',    //下拉菜单选项
                time: '',     //当前时间
                $router: null,//路由器属性
                inp: null,    //输入框
                formInline:{
                    id: null,
                    date: null,
                },
                input: '',
                formLabelWidth: '150px',
                iProductHandovers: null,
                itProducts: null,  //所有商品信息
                tProductionLines: null,  //所有生产产线
                tWares: null,      //所有仓库
                tOrderCS: null,   //所有订单编号
                iProductHandover: {
                    orderId: '',
                    productName: null,
                    productionName: null,
                    wareName: '',
                    num: null,
                    handoverDate: '',
                    head: '',
                    remake: '',
                },
                min: null,
                bu: null,
                shu: null,
                multipleSelection: [],
            }
        },
        methods:{
            //多选
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection);
            },
            //搜索框查询
            search(){
                console.log(this.inp);
                if (this.inp==null||this.inp==''){
                    this.selectPageTPHC();
                }else {
                    axios.get("/searchTProductHandoverSelect/"+this.inp+"/"+this.currentPage+"/"+this.PageSize).then(value => {
                        if (value.data.code == 1){
                            this.iProductHandovers = value.data.data;
                            this.totalCount = parseInt(value.data.msg);
                        }
                    })
                }
            },
            //分页查询所有
            selectPageTPHC(){
                console.log(this.currentPage);
                console.log(this.PageSize);
                axios.get("/PageTProductHandover/"+this.currentPage+"/"+this.PageSize+"/"+this.formInline.id+"/"+this.formInline.date).then(value => {
                    if (value.data.code==1){
                        this.iProductHandovers = value.data.data;
                        this.totalCount = parseInt(value.data.msg);
                    }
                })
            },
            //打印交接单
            PrintHandoverForm(){
                console.log(this.multipleSelection);
                if (this.multipleSelection.length == "0"){
                    this.dialogVisible2 = true;
                }else {
                    let s=null;
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        s=s+"-"+this.multipleSelection[i].id;
                    }
                    console.log(s);
                    axios.get("/PrintHandoverForm/"+s).then(value => {
                        if (value.data.code == 1){
                            //页面跳转
                            location.href='/handover/PrintHandoverForm';
                        }
                    })
                }
            },
            //改变下拉菜单
            xuan(val){
                console.log(val);
                //获取TOrder
                axios.get("/selectXuan/"+val).then(value => {
                    if (value.data.code==1){
                        this.iProductHandover.productName = value.data.data[0].pname;
                        this.iProductHandover.num = value.data.data[0].number;
                        this.iProductHandover.productionName = value.data.data[0].productionName;
                    }

                })
            },
            //点击不同的页数，即改变当前的页数
            handleCurrentChange(val){
                console.log(this.order.id);
                if (this.order.id == null || this.order.id==""){
                    this.currentPage = val;
                    this.selectPage();
                }else {
                    this.currentPage = val;
                    this.onSubmit();
                }

            },
            //每页显示的条数，也就是上图选择框内的数据
            handleSizeChange(val){
                // 改变每页显示的条数
                this.PageSize=val;
                // 注意：在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage=1;
                this.selectPage();
            },
            //新增交接单
            addIProductHandover(){
                console.log("222");
                axios.post("/addIProductHandover",this.iProductHandover).then(value => {
                    if (value.data.code == 1){
                        this.aa();
                        this.selectPageTPHC();
                    }
                })
            },
            //删除交接单
            deleteTProductHandover(){
                console.log(this.multipleSelection);
                if (this.multipleSelection.length == "0"){
                    this.dialogVisible3 = true;
                }else{
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        axios.delete("/deleteTProductHandover/"+this.multipleSelection[i].id).then(value => {
                            if (value.data.code == 1){
                                this.selectPageTPHC();
                            }
                        })
                    }
                }
            },
            //下拉菜单
            selectOther(){
                //查询所有的代发货订单
                axios.get("/selectProductsCJH").then(value => {
                    if (value.data.code == 1){
                        this.tOrderCS = value.data.data;
                        //查询所有的收货仓库
                        axios.get("/selectTWaresCJH").then(value => {
                            if (value.data.code == 1){
                                this.tWares = value.data.data;
                            }
                        })
                    }
                })
            },
            //关闭对话框
            aa(){
                this.dialogFormVisible = false;
                this.iProductHandover= {
                    orderId: '',
                    productName: '',
                    productionName: '',
                    wareName: '',
                    num: '',
                    handoverDate: '',
                    head: '',
                    remake: '',
                }
            }
        },
        mounted(){
            this.selectPageTPHC();
            this.selectOther();
        }
    })
</script>
</body>
</html>